<script setup>
import { reactive } from 'vue'
import useViewEvent from '@/core/hooks/useViewEvent'
import channelApi from '@/api/content/ChannelApi'
import { NormalStateColors } from '@/core/config/ColorMap'

const state = reactive({ visible: false })
// 表单数据
const formState = reactive({})
// 表单结构
const original = {
  id: null,
  name: '', // 名称
  notes: '' // 备注
}
// 初始化数据
const { InitializeData } = useViewEvent({state: state, remoteFetchData: channelApi.getFormModelById, formState: formState, original: original })
// 向父组件暴露方法和属性
defineExpose({ InitializeData })

</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`查看频道`"
    placement="right"
    :width="'50%'"
  >
    <template #extra>
      <a-button type="link" @click="state.visible=false">关闭</a-button>
    </template>
    <a-card
      hoverable
    >
      <a-descriptions :column="1" bordered>
        <a-descriptions-item label="名称">{{ formState.name }}</a-descriptions-item>
        <a-descriptions-item label="关键词">{{ formState.keywords }}</a-descriptions-item>
        <a-descriptions-item label="备注">{{ formState.notes }}</a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag :color="NormalStateColors[formState.state?.value]">{{ formState.state?.label }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="创建时间/人">{{ formState.createOn }}/ {{ formState.createBy }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
  </a-drawer>
</template>